<template>
   <div class="app-container">
		<el-row :gutter="20">
			<el-col :span="6" :xs="24">
				<el-card class="box-card">
					<template v-slot:header>
						<div class="clearfix"><span>个人信息</span></div>
					</template>
					<div>
						<div class="text-center">
							<userAvatar />
						</div>
						<ul class="list-group list-group-striped">
							<li class="list-group-item">
								<svg-icon icon-class="user" /> 账号
								<div class="pull-right">{{ form.username }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="tree" /> 所属部门
								<div class="pull-right">{{ form.deptName }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="post" /> 员工职务
								<div class="pull-right"><dict-tag :options="sys_user_post" :value="form.extra?.post"></dict-tag></div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="sunny" /> 出生日期
								<div class="pull-right">{{ form.extra?.birthday }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="peoples" /> 所属角色
								<div class="pull-right">{{ getRoleName(form.roleIds) }}</div>
							</li>
							<li class="list-group-item">
								<svg-icon icon-class="date" /> 创建日期
								<div class="pull-right">{{ form.createTime }}</div>
							</li>
						</ul>
					</div>
				</el-card>
			</el-col>
			<el-col :span="18" :xs="24">
				<el-card>
						<template v-slot:header>
							<div class="clearfix">
								<span>基本资料</span>
							</div>
						</template>
						<el-tabs v-model="activeTab">
							<el-tab-pane label="基本资料" name="userinfo">
								<userInfo :user="form" />
							</el-tab-pane>
							<el-tab-pane label="修改密码" name="resetPwd">
								<resetPwd />
							</el-tab-pane>
						</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar"
import userInfo from "./userInfo"
import resetPwd from "./resetPwd"
import { getMyInfo } from "@/api/login"
import { listRole } from "@/api/system/role"
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const { proxy } = getCurrentInstance()
const { sys_user_post } = proxy.useDict("sys_user_post")

const activeTab = ref("userinfo")
const loading = ref(true)
const form = ref({})
const roleOptions = ref([])

function getRoleList() {
  listRole({ size: -1, disable: false }).then(response => {
    const result = response.result || {}
    roleOptions.value = result.records || []
  })
}

function getRoleName(arr = []) {
  return arr.map(key => {
    let curRole = roleOptions.value.find(v => v.roleId === key)
    return curRole?.roleName
  }).join(',')
}

function getInfo() {
  getMyInfo().then(response => {
		let result = response.result || {}
    form.value = result
  })
}

getRoleList()
getInfo()
</script>
